<template>
  <div class="recharge-container" v-loading="loading">
    <el-card class="balance-card">
      <div slot="header" class="balance-header">账户余额</div>
      <div class="balance-content">
        <span class="balance-value">￥{{ balance }}</span>
      </div>
    </el-card>

    <div class="recharge-section">
      <h2>充值</h2>
      <el-form :model="rechargeForm" :rules="rules" ref="rechargeForm" label-width="100px" class="recharge-form">
        <el-form-item label="充值金额" prop="amount">
          <el-input-number v-model="rechargeForm.amount" :min="1" :max="10000" label="充值金额" size="large"
                           class="input-number"></el-input-number>
        </el-form-item>
        <el-form-item label="支付方式">
          <el-radio-group v-model="rechargeForm.paymentMethod">
            <el-radio label="微信支付">微信支付</el-radio>
            <el-radio label="支付宝支付">支付宝支付</el-radio>
            <el-radio label="其他">其他</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitRecharge('rechargeForm')" class="recharge-button">立即充值</el-button>
          <el-button type="info" @click="showRechargeHistory" class="order-button">充值订单</el-button>
        </el-form-item>
      </el-form>
      <div class="recharge-description">
        <p><strong>充值说明：</strong></p>
        <ul>
          <li>充值后余额立即生效。</li>
          <li>支持微信支付和支付宝支付。</li>
          <li>如有疑问，请联系客服。</li>
        </ul>
      </div>
    </div>

    <!-- 充值订单列表 -->
    <el-dialog title="充值订单" :visible.sync="dialogVisible" width="80%">
      <el-table :data="rechargeHistory" border style="width: 100%">
        <el-table-column prop="orderNumber" label="订单号" align="center"></el-table-column>
        <el-table-column prop="createdAt" label="充值日期" width="180"></el-table-column>
        <el-table-column prop="amount" label="充值金额" width="120">
          <template slot-scope="scope">
            ￥{{ scope.row.amount }}
          </template>
        </el-table-column>
        <el-table-column prop="paymentMethod" label="支付方式" width="100"></el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status === '成功' ? 'success' : 'info'">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="cancelledAt" label="支付成功时间" width="180"></el-table-column>
        <!--        <el-table-column label="操作" >-->
        <!--          <template slot-scope="scope">-->
        <!--            <el-button size="mini" @click="handleDetails(scope.row)">详情</el-button>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import {getRechargeOrder} from "@/api/user/user";

export default {
  data() {
    return {
      balance: this.$store.state.UserInfo?.balance,
      rechargeForm: {
        amount: 100,
        paymentMethod: '微信支付'
      },
      rules: {
        amount: [
          {required: true, message: '请输入充值金额', trigger: 'blur'},
          {type: 'number', message: '充值金额必须是数字', trigger: 'blur'}
        ]
      },
      rechargeHistory: [],
      dialogVisible: false,
      formHtml: "",
      loading:false
    };
  },
  methods: {
    submitRecharge(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.rechargeForm.paymentMethod != "支付宝支付") {
            return this.$message.warning("暂时只支持支付宝支付~")
          }
          let from = {
            amount: this.rechargeForm.amount
          }
          this.loading=true
          this.$api.user.recharge(from).then(res => {
            if (res.code == 200) {
              const div = document.createElement("div")
              div.innerHTML = res.data
              document.body.appendChild(div)
              document.forms[1].submit()
            }
          })
        } else {
          this.$message.error('充值金额不符合要求！');
          return false;
        }
      });
    },
    showRechargeHistory() {
      this.getRechargeOrder()
      this.dialogVisible = true;
    },
    handleDetails(row) {
      // 处理充值订单详情的逻辑，这里可以弹出模态框或跳转到详情页面
      this.$message.info(`查看订单详情：${row.date} - ￥${row.amount} - ${row.paymentMethod}`);
    },
    getRechargeOrder() {
      this.$api.user.getRechargeOrder().then(res => {
        if (res.code == 200) {
          this.rechargeHistory = res.data
        }
      })
    }
  },
  created() {
    // 发送用户请求
    this.$store.dispatch("getUserInfo")
    // 模拟从后端获取当前余额
    this.balance = this.$store.state.UserInfo?.balance; // 假设当前余额是500元

  }
};
</script>

<style scoped>
.recharge-container {
  min-width: 800px;
  /*margin: 20px auto;*/
  padding: 20px;
}

.balance-card {
  background: linear-gradient(135deg, #4CAF50, #8BC34A);
  color: white;
  border: none;
}

.balance-header {
  font-size: 18px;
  color: white;
}

.balance-content {
  font-size: 24px;
  font-weight: bold;
  /*text-align: center;*/
}

.recharge-section {
  margin-top: 20px;
}

.recharge-form {
  text-align: left;
}

.input-number {
  width: 150px;
}

.recharge-button, .order-button {
  background: linear-gradient(135deg, #4CAF50, #8BC34A);
  border: none;
  color: white;
}

.recharge-button {
  width: 100px;
  margin-right: 10px;
}

.order-button {
  width: 100px;
}

ul li {
  /*数字展示*/
  list-style: decimal;
}

.recharge-description {
  /*font-size: 14px;*/
  color: #606266;
  margin-top: 20px;
  text-align: left;
}

.recharge-description ul {
  padding-left: 20px;
}
</style>
